<template>
  <el-header class="header">

    <div >
      <el-col :span="1"  class="user-info"  style="left: 0px">
        <el-image
          style="width: 50px; height: 50px;left: 45px;margin-top: 5px"
          :src="url"></el-image>
      </el-col>
    </div>
    <div >
      <el-col :span="6"  class="user-info"  style="left: 300px">
        <ul style="list-style:none;color: #82848a;">
          <li  class="li" @click=""><a href="http://www.baidu.com" style="text-decoration:none;color: #e4e8f1;padding: 8px"   target="_blank">资源管理</a></li>
          <li  class="li" @click=""><a href="http://www.taobao.com" style="text-decoration:none;color: #e4e8f1;padding: 8px"   target="_blank">系统管理</a></li>

        </ul>
      </el-col>
    </div>


    <div class="icon-wrap">

      <el-col :span="3"  class="user-info" v-bind:style="styleName">
        <i v-bind:class="className"  id="i1" @click="_collapseChange"></i>

      </el-col>



      <el-col :span="2"  class="user-info"  style="right: 150px">
        <span> {{userName}}</span>
      </el-col>
      <el-col :span="2"  class="user-info"  style="right: 50px">
        <el-dropdown>
          <i class="el-icon-setting" style="margin-right: 15px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item  @click.native="_lookUserInfo">查看</el-dropdown-item>
            <el-dropdown-item @click.native="_loginOut">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
    </div>




    <el-dialog
      title="用户信息"
      :visible.sync="centerDialogVisible"
      width="30%"
      center>

      <el-upload style="text-align: center"
        class="avatar-uploader"
        :action="action"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :with-credentials="true"
        :before-upload="beforeAvatarUpload">
        <img v-if="imageUrl" :src="imageUrl" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>


      <span>用户名：</span><span>{{userName}}</span><br/>
      <span>年龄：</span><span>{{userInfo.age}}</span><br/>
      <span>邮箱：</span><span>{{userInfo.mail}}</span><br/>
      <span>手机号：</span><span>{{userInfo.phone}}</span><br/>
      <span slot="footer" class="dialog-footer">
      <el-button @click="centerDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>


  </el-header>
</template>

<script>

export default {

  mounted(){

    this._getUserInfo();
  },




  data () {
    return {
      msg: 'mybatis-plugs',
      userName:'',
      isCollapse: false,
      imageUrl:'',
      className:'el-icon-s-fold',
      styleName:'left: 100px',
      businessId:'',

      userInfo:'',
      action:'',
      centerDialogVisible:false,
      fits: [ 'contain', ],
      url: 'static/logo.png'
    }
  },
  methods:{


    handleAvatarSuccess(res, file) {

      this.$http.get('/sys_user/preview?id='+this.businessId).then(res=>{
        this.imageUrl = res.data.data;
        console.log('this.imageUrl',this.imageUrl)
      }).catch(err=>{
        console.log(err)
      })

    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isLt2M;
    },

_sysManage(){
  window.open('www.baidu.com', '_blank', 'toolbar=yes, width=900, height=700')
},


    _getUserInfo(){
      this.$http.get('/login/user_info').then(res=>{

        let returnData=res.data;
        console.log(returnData);
        this.userName=returnData.data.username;
        this.userInfo=returnData.data;
        this.action='/api/sys_user/upload?businessId='+this.userInfo.id;
         this.businessId=this.userInfo.id;
        this.$http.get('/sys_user/preview?id='+this.businessId).then(res=>{
          this.imageUrl = res.data.data;
          console.log('this.imageUrl',this.imageUrl)
        }).catch(err=>{
          console.log(err)
        })
        if (this.userName===undefined||''===this.userName){
          this.$router.push({path:'/login',query:{}});
        }else{
          this.$router.push({path:'/',query:{}});
        }
      }).catch(err=>{
        this.$router.push({path:'/login',query:{}});

        console.log(err)
      })
    },



    _collapseChange(){

      if (this.isCollapse) {

        this.isCollapse=false;
        this.className='el-icon-s-fold',
          this.styleName='left: 100px'
      }else{
        this.isCollapse=true;
        this.className='el-icon-s-unfold',
        this.styleName='left: 50px'
      }

      this.$emit("on-result-change",this.isCollapse);
    },

    _lookUserInfo(){
     this. centerDialogVisible=true;
    },

    _loginOut(){

      this.$confirm('是否退出?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {

        this.$http.post('/login/login_out').then(res=>{
          this.$router.push({path:'/login',query:{}});
        }).catch(err=>{
          this.$router.push({path:'/login',query:{}});
          console.log(err)
        })
      }).catch(() => {

      });
    },
  },
}
</script>

<style scoped>
  .header {
    height: 60px;
    width: auto;
    line-height: 60px;
    background: #000000;
    color: #fff;
  }
  .header-logo{
    height: 60px;
    float: left;
    margin: 0 20px;
    width: 100%;
  }
  .user-info{
    position: absolute;
    right: 0;
  }

  .icon-wrap{
    margin-left: 100px;
    width: 100px;
    height: 100px;
    font-size: 30px;
  }


  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  .li{
    float: left;
    margin-left: 10px;
  }

  /*li:hover*/
  /*{*/
  /*  background: #333;*/
  /*}*/

  li:nth-child(1) {
    background: #333;
  }

</style>
